import { ref } from "vue"
const activeId = ref(null)
export function useActiveId() {
  return activeId.value
}

export class Scene {
  offset = { x: 0, y: 0 }; // 拖动偏移
  curOffset = { x: 0, y: 0 }; // 记录上一次的偏移量
  mousePosition = { x: 0, y: 0 }; // 记录鼠标滚轮点击时的坐标位置

  // 绘制折线的数据点
  data = [
    { x: 10, y: 100 },
    { x: 50, y: 200 },
    { x: 100, y: 300 },
    { x: 150, y: 20 },
    { x: 200, y: 25 }
  ];

  style = {
    color: 'rgb(66, 255, 255)',
  };

  x = 0; // 记录鼠标点击Canvas时的横坐标
  y = 0; // 记录鼠标点击Canvas时的纵坐标

  box = {}

  constructor(id, options = {
    width: 600,
    height: 400,
    data: [],
    style: {},
  }) {
    this.canvas = document.querySelector('#' + id)
    this.options = options;
    this.style = options.style;
    this.data = options.data;

    this.box = this.getMinMax();
    options.width = this.box.maxX + 50;
    options.height = this.box.maxY + 50;

    this.width = options.width;
    this.height = options.height;
    this.canvas.width = options.width;
    this.canvas.height = options.height;
    this.ctx = this.canvas.getContext('2d');

    this.onMousedown = this.onMousedown.bind(this);
    this.onMousemove = this.onMousemove.bind(this);
    this.onMouseup = this.onMouseup.bind(this);
    this.canvas.addEventListener('mousedown', this.onMousedown);
  }

  onMousedown(e) {
    if (e.button === 0) {
      // 鼠标左键
      this.x = e.x;
      this.y = e.y
      window.addEventListener('mousemove', this.onMousemove);
      window.addEventListener('mouseup', this.onMouseup)
      this.canvas.style.borderColor = '#0e639c';
      this.canvas.style.borderStyle = "dashed";
    }
  }

  onMousemove(e) {
    const diffX = e.x - this.x
    const diffY = e.y - this.y
    if (diffX == 0 && diffY == 0) {
      return
    }
    const left = this.canvas.offsetLeft + diffX + 'px'
    const top = this.canvas.offsetTop + diffY + 'px'
    this.options.left = left;
    this.options.top = top;
    this.canvas.style.left = left;
    this.canvas.style.top = top;
    this.x = e.x;
    this.y = e.y;
  }

  onMouseup() {
    this.curOffset.x = this.offset.x;
    this.curOffset.y = this.offset.y;
    window.removeEventListener('mousemove', this.onMousemove);
    window.removeEventListener('mouseup', this.onMouseup);
    this.canvas.style.borderColor = 'transparent';
  }

  // 重置
  reset = function () {
    this.clear();
    this.offset = { x: 0, y: 0 }; // 拖动偏移
    this.curOffset = { x: 0, y: 0 }; // 当前偏移
    this.mousePosition = { x: 0, y: 0 };
    this.draw();
  };

  // 求出最值
  getMinMax() {
    const { data } = this;
    let minX = 99999;
    let maxX = 0;
    let minY = 99999;
    let maxY = 0;

    for (let i = 1; i < data.length; i++) {
      const { x, y } = data[i];
      minX = Math.min(minX, x);
      maxX = Math.max(maxX, x);
      minY = Math.min(minY, y);
      maxY = Math.max(maxY, y);
    }

    return {
      minX,
      maxX,
      minY,
      maxY
    };
  }

  draw() {
    const keyFuns = {
      line: this.drawLine,
      curve: this.drawCurve,
    }
    keyFuns[this.options.type] && keyFuns[this.options.type].bind(this)()
  }

  drawLine() {
    const { ctx, data } = this;
    // 绘制折线
    ctx.strokeStyle = this.style.color;
    ctx.fillStyle = this.style.color;
    ctx.beginPath();
    var grad = 20;
    var x0 = grad;
    var y0 = this.canvas.height - grad;

    for(var k = 0;k < data.length;k++){
      ctx.lineTo(x0+data[k].x-0.5,y0-data[k].y-0.5);
      ctx.fillRect(x0+data[k].x-2,y0-data[k].y-2,4,4);  
    }
    ctx.stroke();
  }

  // 绘制曲线
  drawCurve() {
    const { ctx } = this;
    // 开始路径
    ctx.beginPath();

    // 控制点坐标
    const controlPoint1 = 100;
    const controlPoint2 = 200;
    const endPoint1 = 300;
    const endPoint2 = 300;
    // 开始一个路径
    ctx.beginPath();
    // 指定二次贝塞尔曲线的起点
    ctx.lineTo(20, 20);
    // 描述二次贝塞尔曲线
    ctx.quadraticCurveTo(20, 28, 30, 30);
    // 开始绘制曲线
    ctx.stroke();
    ctx.strokeStyle = this.style.color;
    ctx.stroke();

    // 填充曲线颜色
    // ctx.fillStyle = 'red';
    // ctx.fill();
  }

  clear() {
    this.canvas.width = this.width;
  }

  paint() {
    this.clear();
    this.ctx.translate(this.offset.x, this.offset.y);
    this.draw();
  }
}

// let scene = new Scene('canvas');

// scene.draw();
